<template>
  <div class="fl">
    <main class="animated bounceInRight">
      <div class="cent">购物车</div>
      <img src="../../public/image/testimonial-bg.jpg" alt="玫瑰" width="100%" height="290px" class="lbt" />
    </main>
    <div v-if="isshow == 0" class="shop-nouser">
      <div class="box animated bounceInLeft">
        <h2>购物车</h2>
        <div class="nouser-img">
          <img src="../../public/image/cart.png" alt="" width="110px" height="110px" />
        </div>
        <p>您的购物车目前是空的！</p>
        <a href="/products" class="btn shop-primary">&lt;继续浏览</a>
      </div>
    </div>
    <div v-if="isshow == 1">
      <!-- 购物车模块 -->
      <div class="box">
        <div class="container">
          <table>
            <thead>
              <tr>
                <th>图片</th>
                <th>产品</th>
                <th>价钱</th>
                <th>数量</th>
                <th>总价</th>
                <th>删除</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) of cart" :key="index">
                <td class="image">
                  <img :src="item.img" alt="" width="136px" height="136px" />
                </td>
                <td class="product">{{ item.name }}</td>
                <td class="price">{{ item.price }}</td>
                <td class="quantity">
                  <div>
                    <button @click="jia(index)">
                      <i class="iconfont icon-jian shop-icon"></i>
                    </button>
                    <input type="number" min="1" max="100" v-model="item.num"
                      oninput="value=value.replace(/[^\d]|^[0]/g,'')" @blur="blur(index,item.num)" />
                    <button @click="jian(index)">
                      <i class="iconfont icon-jia shop-icon"></i>
                    </button>
                  </div>
                </td>
                <td class="total">￥{{ item.num * item.price }}</td>
                <td class="remove">
                  <i class="iconfont icon-cuo shop-icon" @click="remove(index)"></i>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 结算模块 -->
      <div class="jiesuan">
        <div class="top">
          <div class="js__center">
            <input class="center__input" type="text" placeholder="输入你的优惠劵代码" />
            <button class="shop__input-gw">申请优惠劵</button>
          </div>
          <div><router-link to="/products"><button class="shop__button-gw">继续购物</button></router-link></div>
        </div>
        <div class="shop-san">
          <div class="js-right">
            <h4 class="right__bt">购物车总计</h4>
            <div>
              <p><span>小结</span><span>￥{{total}}</span></p>
            </div>
            <div>
              <p><span>运输</span><span>免费运输</span></p>
            </div>
            <div>
              <p><span>总价</span><span>￥{{total}}</span></p>
            </div>
            <router-link to="/payment"><button style="width: 100%">进行结算</button></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  button,
  input {
    outline: none;
    background: none;
    border: none;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  //去掉type为number的上下箭头部件
  // 没有用户名的情况下
  .shop-nouser {
    width: 1180px;
    height: 530px;
    padding: 90px 0 100px 0;
    padding: 0 12px;
    margin: 0 auto;

    .box {
      text-align: center;

      h2 {
        color: #222222;
        font-family: "Rubik", sans-serif;
        font-size: 35px;
        font-weight: 600;
        line-height: 1.5;
      }

      p {
        font-size: 16px;
        color: #666666;
        text-transform: capitalize;
        margin-top: 30px;
        color: #222222;
      }

      .shop-primary {
        font-size: 13px;
        background-color: #f34f3f;
        color: #ffffff;
        margin-top: 30px;
        border-radius: 3px;
        font-weight: 400;
        font-size: 13px;
        padding: 0px 35px;
        height: 50px;
        line-height: 48px;
        border-width: 1px;

        &:hover {
          background-color: #292d32;
        }
      }
    }
  }

  main {
    position: relative;

    .cent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #222222;
      font-size: 42px;
      font-family: "Lora", serif;
      z-index: 30;
    }
  }

  // 购物车模块
  .box {
    .shop-icon {
      font-size: 20px;
    }

    color: #666666;
    font-size: 16px;
    padding: 90px 0 20px;

    .container {
      max-width: 1200px;
      padding: 0 12px;
      margin: 0 auto;

      table {
        width: 1176px;
        caption-side: bottom;
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 1rem;
        color: #212529;
        vertical-align: top;
        border-color: #dee2e6;

        .image {
          width: 183px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .product {
          width: 260px;
          padding: 15px;
          text-align: center;
        }

        .price {
          width: 177px;
        }

        .quantity {
          width: 201px;
        }

        .total {
          width: 177px;
        }

        .remove {
          width: 177px;
        }

        thead {
          background-color: #e1e1e1;

          th {
            border: 1px solid #e5e5e5 !important;
            font-weight: 500;
            font-size: 14px;
            line-height: 24px;
            color: #222222;
            padding: 15px;
            text-align: center;
            background: none;
            min-width: 16.66%;
          }
        }

        td {
          border: 1px solid #e5e5e5 !important;
          height: 157px;
          text-align: center;

          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 120px;
            height: 42px;
            font-size: 14px;
            color: #222;
            margin: 0 auto;
            line-height: 42px;
            border-bottom: 2px solid #ccc;

            button {
              height: 100%;
              border: none;
              outline: none;
              background: none;
              color: #666666;
            }

            input {
              width: 60px;
              padding: 0 10px;
              background: none;
              text-align: center;
              color: #222222;
              border: 0;
              outline: none;
            }
          }
        }
      }
    }
  }

  // 结算模块
  .jiesuan {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 580px;
    padding: 0 12px;

    // 结算头部
    .top {
      display: flex;
      height: 80px;
      padding: 15px 20px;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      font-size: 14px;

      .js__center {
        width: 50%;
        ;
        display: flex;
        align-items: center;

        .shop__button-gw {
          border-color: #f34f3f;
          background-color: #f34f3f;
          color: #ffffff;
          width: 200px;
          text-align: center;

          &:hover {
            background-color: #292d32;
          }
        }

      }

      .center__input {
        width: 468px !important;
        height: 48px;
        line-height: 48px;
        padding: 12px 10px;
        margin-right: 15px;
        font-size: 14px;
        color: #000000;
        width: 100%;
        border: 1px solid #e5e5e5;
      }

      button {
        background-color: #f34f3f;
        color: #ffffff;
        width: 128px;
        height: 40px;

        &:hover {
          background-color: #292d32;
        }
      }
    }

    // 结算主体
    .shop-san {
      height: 370px;
      display: flex;
      justify-content: flex-end;

      button {
        background-color: #f34f3f;
        color: #ffffff;
        width: 128px;
        height: 40px;

        &:hover {
          background-color: #292d32;
        }
      }

      .js-right {
        width: 500px;
        height: 304px;
        padding: 0 12px;
        margin-top: 40px;
        background-color: #F8F8F8;

        .right__bt {
          height: 70px;
          padding: 27px 15px 25px;
        }

        p {
          display: flex;
          justify-content: space-between;
          margin: 0;
        }

        div {
          padding: 15px 20px;
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
</style>
<script>
  export default {
    data() {
      return {
        isshow: 0,
        cart: [],
        price: 50,
        counnt: 1,
        total: null
      };
    },
    methods: {
      jian(index) {
        this.$store.commit('jian', index)
      },
      jia(index) {

        this.$store.commit('jia', index)
      },
      // 表单失焦
      blur(index, a) {
        var arr = [index, a];
        console.log(arr);
        this.$store.commit('blur', arr)
      },
      //删除商品
      remove(index) {
        var i = confirm("删除此商品");
        if (i) {
          this.$store.commit('remove', index)
        }

      }
    },
    mounted() {
      // if (this.$store.state.car.length != 0) {
      //   this.isshow = 1;
      //   this.cart = this.$store.state.car;
      // }
     
      var user = localStorage.getItem("user");
       console.log(localStorage.getItem(user).length)
       console.log(localStorage.getItem(user))
      if (localStorage.getItem(user) != null && localStorage.getItem(user).length != 2) {
        this.isshow = 1;
        // console.log(JSON.parse(localStorage.getItem(user)));
        this.cart = JSON.parse(localStorage.getItem(user));
        this.$store.state.car = this.cart;

        for (const item of this.cart) { // 结算总价
          this.total += Number(item.price)
        }
      }
    }
  }
</script>